<template>
  <div class="decorative-icon" :class="[`icon-${type}`, { 'animate': animate }]">
    <!-- 新闻图标 -->
    <svg v-if="type === 'news'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 5V19H5V5H19ZM21 3H3V21H21V3ZM17 7H7V9H17V7ZM17 11H7V13H17V11ZM17 15H7V17H17V15Z" fill="currentColor" />
    </svg>
    
    <!-- 星星图标 -->
    <svg v-else-if="type === 'star'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor" />
    </svg>
    
    <!-- 闪电图标 -->
    <svg v-else-if="type === 'lightning'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M13 3V12H17.17L10 21V12H6L13 3Z" fill="currentColor" />
    </svg>
    
    <!-- 默认圆点图标 -->
    <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="8" fill="currentColor" />
    </svg>
  </div>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: 'dot',
    validator: (value) => ['dot', 'news', 'star', 'lightning'].includes(value)
  },
  animate: {
    type: Boolean,
    default: true
  }
});
</script>

<style scoped>
.decorative-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  opacity: 0.5;
  transition: all 0.3s ease;
}


.decorative-icon:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

.animate {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.icon-star.animate {
  animation: pulse 2s ease-in-out infinite;
}

.icon-lightning.animate {
  animation: flash 3s ease-in-out infinite;
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 0.5;
  }
  25%, 75% {
    opacity: 0.8;
  }
}
</style>